<template>
	<view>
		<view>
			<view v-if="tabshow">
				<view>
					<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
				</view>
				<view v-if="current === 0">
					<view class="date">
						<!-- 年份 月份 -->
						<div class="month">
							<u-icon @click="weekPre" name="arrow-left"></u-icon>
							<span style="margin-left: 35rpx;margin-right: 30rpx;">
								{{ currentYear }}年{{ currentMonth }}月
							</span>
							<u-icon @click="weekNext" name="arrow-right"></u-icon>
						</div>
				
						<!-- 星期 -->
						<ul class="weekdays">
							<li></li>
							<li>一</li>
							<li>二</li>
							<li>三</li>
							<li>四</li>
							<li>五</li>
						</ul>
						<!-- 日期 -->
						<ul class="days">
							<li></li>
							<li @click="pick(day)" v-for="(day, index) in days" :key="index">
								<!--本月-->
								<span v-if="day.getMonth()+1 != currentMonth" class="other-month">{{ day.getDate() }}</span>
								<span v-else>
									<!--今天-->
									<span v-if="day.getFullYear() == new Date().getFullYear() && day.getMonth() == new Date().getMonth() && day.getDate() == new Date().getDate()"
									 class="active">{{ day.getDate() }}</span>
									<span v-else>{{ day.getDate() }}</span>
								</span>
							</li>
						</ul>
				
						<ul class="nametable" v-for="(item,index) in mainNameTable" :key="index">
							<li>{{timeorder[index].begin}}-{{timeorder[index].end}}</li>
							<li v-for="(item2,index2) in mainNameTable[index]" @click="handleTimetable(item2,timeorder[index])"
							 :key="index2">
								<view :class="item2.newOrOldUser > 1 ? 'back-red' : 'back-green' ">				
									<span>{{item2.arrangementVOList[0].userRealName}}</span><br><span v-if="item2.arrangementVOList.length > 0">共{{item2.arrangementVOList.length}}人</span>
								</view>
							</li>
						</ul>
						<u-gap height="20" bg-color="white"></u-gap>
						<u-divider color="#2979ff">到底了</u-divider>
						<u-gap height="20" bg-color="white"></u-gap>
					</view>
				</view>
				<view v-else-if="current === 1">
					<view class="date">
						<!-- 年份 月份 -->
						<div class="month">
							<u-icon @click="weekPre" name="arrow-left"></u-icon>
							<span style="margin-left: 35rpx;margin-right: 30rpx;">
								{{ currentYear }}年{{ currentMonth }}月
							</span>
							<u-icon @click="weekNext" name="arrow-right"></u-icon>
						</div>
							
						<!-- 星期 -->
						<ul class="weekdays">
							<li></li>
							<li>一</li>
							<li>二</li>
							<li>三</li>
							<li>四</li>
							<li>五</li>
						</ul>
						<!-- 日期 -->
						<ul class="days">
							<li></li>
							<li @click="pick(day)" v-for="(day, index) in days" :key="index">
								<!--本月-->
								<span v-if="day.getMonth()+1 != currentMonth" class="other-month">{{ day.getDate() }}</span>
								<span v-else>
									<!--今天-->
									<span v-if="day.getFullYear() == new Date().getFullYear() && day.getMonth() == new Date().getMonth() && day.getDate() == new Date().getDate()"
									 class="active">{{ day.getDate() }}</span>
									<span v-else>{{ day.getDate() }}</span>
								</span>
							</li>
						</ul>
							
						<ul class="nametable" v-for="(item,index) in alreadyTable" :key="index">
							<li>{{timeorder[index].begin}}-{{timeorder[index].end}}</li>
							<li v-for="(item2,index2) in alreadyTable[index]" @click="handleTimetable(item2,timeorder[index])"
							 :key="index2">
								<view :class="item2.newOrOldUser > 0 ? 'back-red' : 'back-green' " @click="showInfo(item2)">				
									<span>{{item2.arrangementVOList[0].userRealName}}</span><br><span v-if="item2.arrangementVOList.length > 0">共{{item2.arrangementVOList.length}}人</span>
								</view>
							</li>
						</ul>
						<u-gap height="20" bg-color="white"></u-gap>
						<u-divider color="#2979ff">到底了</u-divider>
						<u-gap height="20" bg-color="white"></u-gap>
					</view>
				</view>
			</view>
			<view v-else>
				<view>
					<u-divider color="#fa3534">{{timeZone.begin}}-{{timeZone.end}}</u-divider>
				</view>
				<view v-for="(item, index) in personDetail.arrangementVOList" :key="index">
					<view v-if="item.status === 2">
						<u-cell-item icon="account-fill" :title="item.userRealName" value="删除" @click="deleteArrangment(index)"></u-cell-item>
					</view>
					<view v-else>
						<u-cell-item icon="account-fill" :title="item.userRealName"></u-cell-item>
					</view>
				</view>
				<view class="btn" v-if="personDetail.arrangementVOList[0].status === 2">
					<u-button class="u-m-r-5" @click="allowArrange()" plain type="primary">通过</u-button>
				</view>
				<view class="btn" v-else>
					<u-button class="u-m-r-5" @click="backToPage()" plain type="primary">返回</u-button>
				</view>
				<view>
					<u-modal v-model="tipshow" :content="mContent"  @confirm="addInfo()" show-cancel-button="true"></u-modal>
					<u-modal v-model="dshow" :content="dcontent" @confirm="deleteInfo()" show-cancel-button="true"></u-modal>
					<u-toast ref="uToast" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from "../../utils/api.js"
	export default {
		data() {
			return {
				dshow:false,
				dcontent:"确定要删除吗？",
				tipshow:false,
				mContent:"确定要通过吗？",
				tabshow:true,
				list: [{
					name: '未通过'
				}, {
					name: '已通过'
				}],
				current: 0,
				bgd:'red',
				pickerDisabled:false,
				pickershow:false,
				timetitle:'',
				arr_btn_mes: '确定',
				cachetable:[],
				timetableShow: false,
				show: false,
				already: false,
				already_cont: '提交成功！',
				content: '是否要提交申请',
				currentYear: 1970, // 年份
				currentMonth: 1, // 月份
				currentDay: 1, // 日期
				currentWeek: 1, // 星期
				choosetime: '',
				timeorder: [],
				namecont: [],
				// 时间区段
				mainNameTable: [],
				alreadyTable:[],
				days: [],
				tomorrow:'',
				ruleback:'成功',
				personDetail:[],
				timeZone:'',
				chooseIndex:''
			}
		},
		created() {
			this.initData(null)
			if(this.currentWeek==6||this.currentWeek==7){
				this.weekNext()
			}
			this.querytimetable()
			api.gettimeorder(this.globalConst.ARRANGEMENT_APPIONTMENT_TYPE).then((res) => {
				this.timeorder = res.data
				this.timeorder.sort(function(a, b) {
					return a.id - b.id
				})
			})
		},
		methods: {
			addInfo:function(){
				let data = this.personDetail.arrangementVOList
				for (var i = 0;i < data.length;i++){
					data[i].status = 1
					api.allowArrangement(data[i]).then(res => {
						if (res.code === 0){
							this.$refs.uToast.show({
								title: "通过成功",
								type: 'success'
							})
				
						}else{
							this.$refs.uToast.show({
								title: "系统错误",
								type: 'warning ',
							})
							this.querytimetable()
						}
					})
				}
			},
			deleteInfo:function(){
				api.deleteArrangement(this.personDetail.arrangementVOList[this.chooseIndex].id).then(res => {
					if (res.code === 0){
						this.$refs.uToast.show({
							title: "删除成功",
							type: 'warning ',
						})
						this.querytimetable()
					}else{
						this.$refs.uToast.show({
							title: "系统错误",
							type: 'warning ',
						})
						this.querytimetable()
					}
				})
			},
			backToPage:function(){
				this.tabshow = true
				this.querytimetable()
			},
			allowArrange:function(){
				this.tipshow = true
				
			},
			deleteArrangment:function(index){
				this.dshow = true
				this.chooseIndex = index
			},
			change(index) {
				this.current = index;
			},
			showInfo:function(e){
				this.personDetail = e
				
			},
			querytimetable() {
				api.getUnAllowArrangement(this.days[0].getTime(),this.globalConst.ARRANGEMENT_APPIONTMENT_TYPE,this.globalConst.NOT_ARRANGEMENT_PASS).then((res) => {
					this.mainNameTable = res.data
					for(let item of this.mainNameTable){
						item.splice(5,2)
					}
				})
				api.getUnAllowArrangement(this.days[0].getTime(),this.globalConst.ARRANGEMENT_APPIONTMENT_TYPE,this.globalConst.IS_ARRANGEMENT_PASS).then((res) => {
					this.alreadyTable = res.data
					for(let item of this.alreadyTable){
						item.splice(5,2)
					}
				})
			},
			//时间段名单详情
			handleTimetable(e,time) {
				this.tabshow = false
				this.personDetail = e
				this.timeZone = time
			},
			formatDate(year, month, day) {
				const y = year
				let m = month
				if (m < 10) m = `0${m}`
				let d = day
				if (d < 10) d = `0${d}`
				return `${y}-${m}-${d}`
			},
			initData(cur) {
				let date = ''
				if (cur) {
					date = new Date(cur)
				} else {
					date = new Date()
				}
				this.currentDay = date.getDate() // 今日日期 几号
				this.currentYear = date.getFullYear() // 当前年份
				this.currentMonth = date.getMonth() + 1 // 当前月份
				this.currentWeek = date.getDay() // 1...6,0  // 星期几
				if (this.currentWeek === 0) {
					this.currentWeek = 7
				}
				const str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay) // 今日日期 年-月-日
				this.days.length = 0
				// 今天是周日，放在第一行第7个位置，前面6个 这里默认显示一周，如果需要显示一个月，则第二个循环为 i<= 35- this.currentWeek
				/* eslint-disabled */
				for (let i = this.currentWeek - 1; i >= 0; i -= 1) {
					const d = new Date(str)
					d.setDate(d.getDate() - i)
					this.days.push(d)
				}
				for (let i = 1; i <= 7 - this.currentWeek; i += 1) {
					const d = new Date(str)
					d.setDate(d.getDate() + i)
					this.days.push(d)
				}
				this.days.pop()
				this.days.pop()
				let today = new Date(new Date().setHours(8, 0, 0, 0))
				let tomorrow = today.setTime(today.getTime()+24*60*60*1000);
				if(this.days.findIndex((v) => {
					return v * 1 === tomorrow})!=-1){
						this.tomorrow = tomorrow*1
						this.ind2 = this.days.findIndex((v) => {
								return v * 1 == tomorrow * 1
						})
						if(this.cachetable.length===0){
							this.querytimetable()
						}else{
							this.mainNameTable = this.cachetable
						}
						
					}else{
						this.ind2 = -1
						this.querytimetable()
					}
				

			},

			// 上个星期
			weekPre() {
				const d = this.days[0] // 如果当期日期是7号或者小于7号
				d.setDate(d.getDate() - 7)
				this.initData(d)
			},

			// 下个星期
			weekNext() {
				const d = this.days[4] // 如果当期日期是7号或者小于7号
				d.setDate(d.getDate() + 7)
				this.initData(d)
			},

			// 上一個月  传入当前年份和月份
			pickPre(year, month) {
				const d = new Date(this.formatDate(year, month, 1))
				d.setDate(0)
				this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
			},


			// 下一個月  传入当前年份和月份 
			pickNext(year, month) {
				const d = new Date(this.formatDate(year, month, 1))
				d.setDate(35)
				this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
			},

			// 当前选择日期
			pick(date) {
			},
		},
	}
</script>

<style scoped lang="scss">
	.active {
	   background: #e0e0fd;
	   color: #fff;
	 }
	.date {
		height: 180rpx;
		color: #333;
		background-color: #F1F1F1;

		.month {
			font-size: 30rpx;
			text-align: center;
			padding-top: 20rpx;
		}

		.weekdays {
			display: flex;
			font-size: 28rpx;
			margin-top: 20rpx;

			li {
				flex: 1;
				text-align: center;
			}
		}

		.days {
			display: flex;
			margin-bottom: 18rpx;

			li {
				flex: 1;
				font-size: 30rpx;
				text-align: center;
				margin-top: 10rpx;
				line-height: 40rpx;

				.active {
					display: inline-block;
					width: 45rpx;
					height: 45rpx;
					color: #fff;
					border-radius: 50%;
					background-color: #fa6854;
				}

				.other-month {
					color: #e4393c;
				}
			}
		}

		.nametable {
			display: flex;
			li {
				
				flex: 1;
				font-size: 28rpx;
				text-align: center;
				line-height: 70rpx;
				color: #999;
				border-right: 1rpx solid #f1f1f1;
				border-bottom: 1rpx solid #f1f1f1;
				height: 150rpx;
				.other-month {
					color: #e4393c;
				}
			}
		}

		.innametable {
			display: flex;

			li {
				flex: 1;
				font-size: 28rpx;
				text-align: center;
				line-height: 50rpx;
				color: #999;
				border: 1rpx solid #f1f1f1;
				height: 50rpx;
				width: 50rpx;

				.active {
					display: inline-block;
					width: 45rpx;
					height: 45rpx;
					color: #fff;
					border-radius: 50%;
					background-color: #fa6854;
				}

				.other-month {
					color: #e4393c;
				}
			}
		}

	}

	.btn {
		margin: 0 auto;
		width: 92%;
	}

	.choosenametable {
		margin: 0 auto;
		width: 92%;
		margin-bottom: 30rpx;
	}
	
	.back-red{
		background-color: red;
	}
	
	.back-green{
		background-color: green;
	}
</style>
